<template>
	<div>
		<Table :columns="getColumns" :data="severList" border>
			<template slot-scope="{ row, index }" slot="severName">
				<div style="text-align: left;">
					<Checkbox v-model="severList[index].check" v-if="!ifedit && isPartShrink==1" :disabled="isStep6" @on-change="checkData($event,index)">
					</Checkbox>
					<span v-if="ifedit && isPartShrink==1">{{row.severName}}</span>
					<span v-else>{{row.service.severName}}</span>
				</div>
			</template>
			<template slot-scope="{ row, index }" slot="quantity">
				<span v-if="isStep6">{{row.shrinkVal}}</span>
				<span v-else-if="ifedit">{{row.shrinkVal}}</span>
				<InputNumber v-else :min="0" v-model="severList[index].shrinkVal" :max="row.quantity" @on-change="setShrinkCheck(index)"/>
			</template>
			<template slot-scope="{ row, index }" slot="des">
				<span v-if="isStep6 || ifedit">{{row.des}}</span>
				<Input v-else v-model="severList[index].des" @on-blur="writeDes(index)"/>
			</template>
		</Table>
	</div>
</template>
<script>
	export default {
		name: "apply",
		data() {
			return {
				columns:[
					{
						title: "服务类型",
						align: "center",
						key: "severName",
						minWidth: 100,
						slot: "severName",
					},
					// {
					// 	title: "操作系统",
					// 	align: "center",
					// 	key: "os",
					// 	width: 150,
					// 	// slot: "os"
					// },
					// {
					// 	title: "raid方式",
					// 	align: "center",
					// 	children: [{
					// 			title: '系统盘',
					// 			align: 'center',
					// 			key: "sysRaid",
					// 			width: 100,
					// 			// slot: "sysRaid"
					// 		},
					// 		{
					// 			title: '数据盘',
					// 			align: 'center',
					// 			key: "dataRaid",
					// 			width: 100,
					// 			// slot: "dataRaid"
					// 		},
					// 	]
					// },
					// {
					// 	title: "部署区域",
					// 	align: "center",
					// 	key: "place",
					// 	width: 100,
					// 	// slot: "place"
					// },

					// {
					// 	title: "测算依据/必要性说明",
					// 	align: "center",
					// 	key: "purpose",
					// 	minWidth: 100,
					// 	// slot: "purpose"
					// },
					// {
					// 	title: "已申请数量",
					// 	align: "center",
					// 	width: 80,
					// 	key: "quantity",
					// },
					// {
					// 	title: "缩容数量",
					// 	align: "center",
					// 	width: 100,
					// 	key: "quantity",
					// 	slot: "quantity",
					// },
				],
			}
		},
		created: function() {
			//console.log("-gggggg--------->",this.severList)
			//this.$forceUpdate()
		},
		mounted: function() {
			console.log("-gggggg--------->",this.severList)
			// this.$forceUpdate()
		},
		methods:{
			writeDes(index){
				console.log("---writeDes--",this.severList[index].check);
				this.severList[index].check = true;
				this.$forceUpdate()
			},
			setShrinkCheck(index) {
				console.log("-----index--------",index,this.severList);
				this.severList[index].check = true;
				this.$forceUpdate();
			},
			checkData(data,index){
				this.severList[index].shrinkVal = 0;
				this.severList[index].des = "";
				console.log("=======checkData=======",this.severList[index],index,data);
				//this.$forceUpdate();
			},
			validate(){
				var isSubmit = true;

				if(this.severList != undefined && this.severList != null){
					this.severList.some(item=>{
						if(item.check != undefined){
							console.log("111111111",item);
							if(item.check){
								if(item.shrinkVal == item.quantity){
									console.log("222222222222",item.shrinkVal,item.quantity);
									isSubmit = false;

									this.$Message.error({
										content: "[" + item.service.severName + "]" + '缩容后数量不能等于原有数量!',
										duration: 3
									});
								}
							}
						}
					})
				}

				return isSubmit;
			}
		},
		computed: {
			severList: {
				get: function() {
					return this.value;
				},
				set: function(value) {
					this.$emit('input', value);
				}
			},
			getColumns(){
				if(!this.ifedit || this.isPartShrink==0){
					this.columns.push(
						{
							title: "操作系统",
							align: "center",
							key: "os",
							width: 150,
							// slot: "os"
						},
					)

					this.columns.push(
						{
							title: "raid方式",
							align: "center",
							children: [{
									title: '系统盘',
									align: 'center',
									key: "sysRaid",
									width: 100,
									// slot: "sysRaid"
								},
								{
									title: '数据盘',
									align: 'center',
									key: "dataRaid",
									width: 100,
									// slot: "dataRaid"
								},
							]
						},
					)

					this.columns.push(
						{
							title: "部署区域",
							align: "center",
							key: "place",
							width: 100,
							// slot: "place"
						},
					)

					this.columns.push(
						{
							title: "测算依据/必要性说明",
							align: "center",
							key: "purpose",
							minWidth: 100,
							// slot: "purpose"
						},
					)
				}

				this.columns.push(
					{
						title: "已申请数量",
						align: "center",
						width: 80,
						key: "quantity",
					},
				)

				if(this.isPartShrink==1){
					this.columns.push(
						{
							title: "缩容后的数量",
							align: "center",
							width: 100,
							key: "quantity",
							slot: "quantity",
						}
					)

					this.columns.push(
						{
							title: "备注",
							align: "center",
							minWidth: 200,
							slot: "des",
						}
					)
				}
				console.log("------serviceColumns----------",this.columns,this.ifedit);
				return this.columns;
			}
		},
		props: {
			value: {},
			ifedit: {},
			isPartShrink: {},
            isStep6: {
                type: Boolean,
                default: false
            }
		},
	}
</script>